<template>
  <div class="right-menu">
    <div v-if="showMenus.includes('gxq')" class="menu-item" @click="onStateChange(2)">
      <span class="gxq">感兴趣</span>
    </div>
    <div v-if="showMenus.includes('mxq')" class="menu-item " @click="onStateChange(3)">
      <span class="mxq">不感兴趣</span>
    </div>
    <div v-if="showMenus.includes('yms')" class="menu-item " @click="onStateChange(4)">
      <span class="yms">邀面试</span>
    </div>
    <div v-if="showMenus.includes('scan')" class="menu-item">
      <img src="../images/ic_scan.png" @click="readIdCard"/>
    </div>
    <div v-if="showMenus.includes('position')" class="menu-item">
      <img src="../images/ic_position.png" @click="showPosition"/>
    </div>
    <div v-if="showMenus.includes('refresh')" class="menu-item">
      <img src="../images/ic_refresh.png" @click="refresh"/>
    </div>
    <div v-if="showMenus.includes('back')" class="menu-item" @click="back">
      <img src="../images/ic_back.png" />
    </div>
    <div v-if="showMenus.includes('exit')" class="menu-item" @click="exit">
      <img src="../images/ic_exit.png" />
    </div>

    <el-dialog
      :append-to-body="true"
      :show-close="false"
      :visible.sync="dgIdCardVisible"
      custom-class="dg-idcard"
      width="800px">
      <slot name="title">
        <h2 style="text-align:center; font-size: 30px; color:#000;">请刷身份证
          <img class="dg-close" src="../images/ic_close.png" @click="close"/>
        </h2>
      </slot>
      <div class="idcard-box">
        <img src="../images/idcard.png" />
      </div>
    </el-dialog>

  </div>
</template>
<script>
import { findCVBaseInfoByIdCode } from '../../../assets/js/domains'

export default {
  data(){
    return{
      dgIdCardVisible: false,
      idCode: '', //读卡器获取身份证
      menuList:[],
    }
  },
  inject:['reload'],
  props:{
    showMenus:{
      type: Array,
      default: function(){
        return ['scan','refresh','exit']
      }
    }
  },
  watch:{
    // idCode(value){
    //   if(!value) return
    //   this.$alert('身份证号：'+value)
    //   this.getUserInfoByIdCode(value)
    // },
    showMenus(newValue){
      this.menuList = newValue
    }
  },
  methods:{
    readIdCard(){
      var that = this
      new Device().startFun(function (type, message) {
        that.showMessage(type, message)
      })
      window.getCertData = (result) => {
        if(!result || !result.Certificate || !result.Certificate.IDNumber){
          this.$alert("未检测到身份证号码",'提示')
          return
        }
        that.getUserInfoByIdCode(result.Certificate.IDNumber)
      }
    },
    showMessage: function (type, message) {
      if (undefined !== this.loading) this.loading.close()
      if (type !== 'loading') {
        this.$message({
          type: type,
          message: message
        });
      } else {
        this.loading = this.$loading({
          lock: true,
          text: message,
          spinner: 'el-icon-loading',
          background: 'rgba(0, 0, 0, 0.7)'
        })
        this.timerLoading = setTimeout(() => {
          this.loading && this.loading.close()
          this.$alert("未检测到身份证，请重试！",'提示')
        }, 1000 * 15);
      }
    },
    getUserInfoByIdCode(idCode){
      this.timerLoading && clearTimeout(this.timerLoading)
      findCVBaseInfoByIdCode({idCode}).then(res => {
        this.loading && this.loading.close()
        if(res.code != 200){
          this.$alert("读取用户信息失败",'提示')
          return
        }
        
        if(!res.data || res.data.approval != 2){
          this.$alert("用户不存在或未通过审核",'提示')
          return
        }
        if(res.data.jlzt != 1){
          this.$alert("用户简历状态异常", '提示')
          return
        }
        if(this.$route.path === '/personInfo'){
          this.$emit('reload', res.data.userUid)
          return
        }
        this.$router.push({path: '/personInfo', query:{ id: res.data.userUid}})
      }).catch(err => {
        this.$alert(res.message || '读取用户信息失败', '提示')
      })
    },
    onStateChange(state){
      this.$emit("stateChange", state)
    },
    close(){
      this.dgIdCardVisible = false
    },
    showPosition(){
      this.$emit("showPosition")
    },
    refresh(){
      location.reload()
    },
    back(){
      this.$router.back();
    },
    exit(){
      localStorage.clear()
      this.$router.push({path: '/login'})
    }
  }
}
</script>
<style lang="less" scoped>
.right-menu{
  position: fixed;
  right: 0;
  bottom: 0;
  background-color: rgba(255, 255, 255, .5);
  padding: 40px 30px 20px;
  border-radius: 16px;
  z-index: 10;
  .menu-item{
    width: 104px;
    height: 104px;
    border-radius: 60px;
    padding: 10px;
    line-height: 20px;
    color: #fff;
    font-size: 18px;
    cursor: pointer;
    img{width: 100%;height: 100%;}
    span{
      width: 84px;height: 84px;
      line-height: 84px;
      text-align: center;
      font-weight: 700;
      display: inline-block;
      border-radius: 50%;
      font-size: 22px;
    }
    & .gxq{background-color: #D31A2C;}
    & .mxq{background-color: #262626;font-size: 18px;}
    & .yms{background-color: #4DB5C2;}
  }
  .menu-item+.menu-item{margin-top: 10px;}
}


.idcard-box{
  padding: 30px 50px 50px;
  text-align: center;
  img{
    width: 447px;
    height: 303px;
  }
}
</style>
<style>
.dg-idcard{border-radius: 16px;}
.dg-idcard .dg-close{
  position:absolute;
  top: -70px;
  right: 0;
  width: 40px; height: 40px;
}
.dg-idcard .el-dialog__header{padding: 5px;}
.dg-idcard .el-dialog__body{padding: 0;}
</style>